/**
 * Angular 2 decorators and services
 */
import {
  Component,
  OnInit,
  ViewEncapsulation
} from '@angular/core';
import { AppState } from './app.service';

/**
 * App Component
 * Top Level Component
 */
@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  template: `
    <nz-layout class="layout">
      <nz-header>
        <div class="logo">
          计划系统
        </div>
        <div class="logo">
          人生最关键的事情就是做计划，然后执行计划，做到知行合一，你一定会成功
        </div>
      </nz-header>
      <nz-content >
        <nz-layout class="body-content" style="background: #fff">
          <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
            <div class="logo">
            </div>
            <ul nz-menu [nzMode]="isCollapsed?'vertical':'inline'">
              <li nz-submenu [nzOpen]="true">
                <span title><i class="anticon anticon-user"></i><span class="nav-text">User</span></span>
                <ul>
                  <li nz-menu-item>Tom</li>
                  <li nz-menu-item>Bill</li>
                  <li nz-menu-item>Alex</li>
                </ul>
              </li>
              <li nz-submenu [nzOpen]="true">
                <span title><i class="anticon anticon-team"></i><span class="nav-text">Team</span></span>
                <ul>
                  <li nz-menu-item>Team 1</li>
                  <li nz-menu-item>Team 2</li>
                </ul>
              </li>
              <li nz-menu-item><span><i class="anticon anticon-file"></i><span class="nav-text">File</span></span></li>
            </ul>
          </nz-sider>
          <nz-content style="padding: 0 24px; min-height: 280px;">Content</nz-content>
        </nz-layout>
      </nz-content>
    </nz-layout>
  `,
  styles  : [
      `
      :host ::ng-deep .logo {
        width: 120px;
        height: 31px;
        background: #333;
        border-radius: 6px;
        margin: 16px 28px 16px 0;
        float: left;
      }
      .body-content {
        height: calc(100vh - 100px);
      }
    `
  ]
})
export class AppComponent implements OnInit {
  public angularclassLogo = 'assets/img/angularclass-avatar.png';
  public name = 'Angular 2 Webpack Starter';
  public url = 'https://twitter.com/AngularClass';

  constructor(
    public appState: AppState
  ) {}

  public ngOnInit() {
    console.log('Initial App State', this.appState.state);
  }

}

/**
 * Please review the https://github.com/AngularClass/angular2-examples/ repo for
 * more angular app examples that you may copy/paste
 * (The examples may not be updated as quickly. Please open an issue on github for us to update it)
 * For help or questions please contact us at @AngularClass on twitter
 * or our chat on Slack at https://AngularClass.com/slack-join
 */
